<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <p>{{count}}</p>
            <p>{{doubleCount}}</p>
            <p>{{tripleCount}}</p>
            <p>
                <button @click="count++">count++</button>
                <button @click="count--">count--</button>
            </p>
        </div>
    </div>
</body>
<script>

    // watch 监听属性
    // 作用: 对应属性名监听data中某个绑定的数据的改变,如果被监听的数据发生改变,可以执行一系列副作用操作
    // 注意: 
    // 1. watch监听的数据,只有在监听的数据发生改变时才会触发对应的回调函数
    // 2. watch中可以执行异步操作  

    // 小结:
    // computed和watch的区别:

    // computed 计算属性 
    // 1. 根据data中绑定的数据(一个或多个)得到的一个新数据(派生值 衍生值), 并缓存计算的结果,当被依赖的数据发生改变时,才会重新计算 并缓存新的结果  (其他数据发生了改变 对自身造成的影响)
    // 2. 计算属性对应的函数默认 data数据绑定之后默认执行一次 作为计算属性的结果
    // 3. 计算属性不能执行异步操作

    // watch 监听属性
    // 1. 对应属性名监听data中某个绑定的数据的改变,如果被监听的数据发生改变,可以执行一系列副作用操作 (自身数据变化之后 对其他数据造成的影响)
    // 2. 被watch监听的数据,只有在监听的数据发生改变时才会触发对应的回调函数 (默认情况下)
    // 2. watch中可以执行异步操作  

    // 员工(我) => 我努力工作之后  => 1.  给老板和公司增加了收益   2. 升职加薪 

    var vm = new Vue({
        el: "#app",
        data: {
            count:1,
            doubleCount:2,
            tripleCount:3,
        },
        methods: {},
        computed:{},
        watch:{
            // 属性名: 被监听的属性(data中的数据/计算属性)
            // 属性值: 回调函数 -> 当被监听的数据发生改变之后触发,回调函数有两个参数,分别表示newVal,oldVal (注意->不适合监听对象属性的变化)
            count:function(newVal,oldVal){
                
                // 可以执行一系列副作用操作 => 如果存在数据依赖于被监听的属性 -> 此时,被监听的数据发生改变, 依赖此数据的属性也要跟着改变
                setTimeout(()=>{
                    console.log("count发生了改变",newVal,oldVal);
                    if(newVal>=1){
                        this.doubleCount = newVal * 2;
                        this.tripleCount = newVal * 3;
                    }else{
                        this.count = oldVal;
                    }
                },2000)
            }
        }
    });





</script>

</html>